<template>
  <div class="swipe" >
    <mt-swipe :auto="4000" :class="issetheights? 'setheights':'' ">
      <mt-swipe-item class="swipe" v-for="item in lengths" :key="item" :style="{backgroundImage: 'url(\'' + item + '\')',backgroundSize:'100% 100% '}">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        lengths:"",
        issetheights:false,
      }
    },
    props:["swipecontent","setheight"],
    created:function(){
      this.getmsg()
    },
    watch: {
      '$route' (to, from) {
        //刷新参数放到这里里面去触发就可以刷新相同界面了
        this.getmsg()
      }
    },
    methods:{
      getmsg:function(){
        var self=this
        setTimeout(function(){
          var swipecontent=self.swipecontent
          self.lengths=swipecontent

          if(self.setheight =="473px" ){
            self.issetheights=true
          }

        },100)

      }
    },
    mounted:function(){

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .setheights{
    height:353px;
  }
  .swipe{
    height: 180px;
  }
  .swipe_one{
    background-size: 100% 100%;
  }
  .swipe_two{
    background-size: 100% 100%;
  }
  .swipe_three{
    background-size: 100% 100%;
  }
</style>
